<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>13-定位</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#fixed{width:100px;height:100px;background-color:#f66;text-align:center;line-height:100px;position:relative;left:45%;top:0;border-radius:50%;}
			#box{width:800px;height:240px;border:1px solid rgba(224,154,154,.8);background-color:#ccc;margin:100px auto;position:relative;}
			#box ul li{width:100px;height:40px;background-color:rgba(1,1,1,.8);}
			#box ul .item1{margin-top:20px;}
			#box ul .item1:hover{background:yellow;}
			#box ul .item2:hover{background:yellow;}
			#box ul .item3:hover{background:yellow;}
			#box ul .item4:hover{background:yellow;}
			#box ul .item5:hover{background:yellow;}
			#box ul li a{text-align:center;line-height:40px;float:left;}
			#box ul li span{line-height:40px;float:right;}
			#box ul li ul{display:none;width:700px;height:240px;position:absolute;top:0;left:100px;background-color:#fff;}
			#box ul li ul li{background-color:#fff;float:left;}
			#box ul li ul li a{width:100px;height:40px;margin:0 auto;text-align:center;line-height:40px;}
			#box ul li:hover ul{display:block;}
			/* #box ul .item2 ul li a{display:block;margin:0 auto;text-align:center;line-height:40px;}
			#box ul .item2:hover ul{display:block;}
			#box ul .item3 ul li a{display:block;margin:0 auto;text-align:center;line-height:40px;}
			#box ul .item3:hover ul{display:block;}
			#box ul .item4 ul li a{display:block;margin:0 auto;text-align:center;line-height:40px;}
			#box ul .item4:hover ul{display:block;}
			#box ul .item5 ul li a{display:block;margin:0 auto;text-align:center;line-height:40px;}
			#box ul .item5:hover ul{display:block;}
			 */
		</style>
	</head>
	<body>
		<div id="fixed">定位</div>
		<div id="box">
			<ul>
				<li class="item1">
					<a>html</a>
					<span>></span>
					<ul>
						<li><a href="###">html</a></li>
						<li><a href="###">2</a></li>
						<li><a href="###">3</a></li>
						<li><a href="###">4</a></li>
						<li><a href="###">5</a></li>
						<li><a href="###">6</a></li>
						<li><a href="###">7</a></li>
						<li><a href="###">8</a></li>
						<li><a href="###">9</a></li>
						<li><a href="###">10</a></li>
						<li><a href="###">11</a></li>
						<li><a href="###">12</a></li>
						<li><a href="###">13</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
					</ul>
				</li>
				<li class="item2">
					<a>css</a>
					<span>></span>
					<ul>
						<li><a href="###">css</a></li>
						<li><a href="###">2</a></li>
						<li><a href="###">3</a></li>
						<li><a href="###">4</a></li>
						<li><a href="###">5</a></li>
						<li><a href="###">6</a></li>
						<li><a href="###">7</a></li>
						<li><a href="###">8</a></li>
						<li><a href="###">9</a></li>
						<li><a href="###">10</a></li>
						<li><a href="###">11</a></li>
						<li><a href="###">12</a></li>
						<li><a href="###">13</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
					</ul>
				</li>
				<li class="item3">
					<a>javascript</a>
					<span>></span>
					<ul>
						<li><a href="###">javascript</a></li>
						<li><a href="###">2</a></li>
						<li><a href="###">3</a></li>
						<li><a href="###">4</a></li>
						<li><a href="###">5</a></li>
						<li><a href="###">6</a></li>
						<li><a href="###">7</a></li>
						<li><a href="###">8</a></li>
						<li><a href="###">9</a></li>
						<li><a href="###">10</a></li>
						<li><a href="###">11</a></li>
						<li><a href="###">12</a></li>
						<li><a href="###">13</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
					</ul>
				</li>
				<li class="item4">
					<a>mysql</a>
					<span>></span>
					<ul>
						<li><a href="###">mysql</a></li>
						<li><a href="###">2</a></li>
						<li><a href="###">3</a></li>
						<li><a href="###">4</a></li>
						<li><a href="###">5</a></li>
						<li><a href="###">6</a></li>
						<li><a href="###">7</a></li>
						<li><a href="###">8</a></li>
						<li><a href="###">9</a></li>
						<li><a href="###">10</a></li>
						<li><a href="###">11</a></li>
						<li><a href="###">12</a></li>
						<li><a href="###">13</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
					</ul>
				</li>
				<li class="item5">
					<a>node</a>
					<span>></span>
					<ul>
						<li><a href="###">node</a></li>
						<li><a href="###">2</a></li>
						<li><a href="###">3</a></li>
						<li><a href="###">4</a></li>
						<li><a href="###">5</a></li>
						<li><a href="###">6</a></li>
						<li><a href="###">7</a></li>
						<li><a href="###">8</a></li>
						<li><a href="###">9</a></li>
						<li><a href="###">10</a></li>
						<li><a href="###">11</a></li>
						<li><a href="###">12</a></li>
						<li><a href="###">13</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
						<li><a href="###">14</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		
		
	</body>
</html>
